<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
     <style>
         div{
             width: 100px;
             height: 100px;
             background-color: pink;
         }
     </style>
</head>
<body>
<div v-move id="div15" >

</div>
<span v-move>你好啊啊啊啊</span>
</body>
<script>
    Vue.directive("move",function (el) {
        el.style.position="absolute"
        el.onmousedown=function (e) {
            //鼠标点击时，获取div的左边距和上边距
           var disx=e.clientX-el.offsetLeft;
           var disy=e.clientY-el.offsetTop;
           console.log(disx,disy);

          document.onmousemove=function (e) {
             var left=e.clientX-disx
              var top=e.clientY-disy
              el.style.left=left+"px"
              el.style.top=top+"px"


          }
          document.onmouseup=function (e) {
            document.onmousemove=null
            document.onmouseup=null
          }
        }
      }
    )
    new Vue({
        el:"#div15",
        data:{

        }
    })
</script>
</html>